<template>
	<view class="page">
		
		<!-- 轮播图部分 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" class="carousel">
			<swiper-item v-for="item in carouselList" :key="item.id">
				<image :src="item.image" class="carousel"></image>
			</swiper-item>			
		</swiper>
		<!-- 热门超英部分 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/hot.png"class="page-ico"></image>
				<text class="hot-title">热门超英</text>
			</view>
			<!-- 滚动试图 -->
			<scroll-view scroll-x="true" class="page-block hot" >
				<view class="poer" v-for="hotitem in superherolList" :key="hotitem.id">
					<view class="poper-box">
						<image :src="hotitem.cover" class="super-poer"></image>
						<view class="poer-title">{{hotitem.name}}</view>
					</view>
					<!-- 评分 -->
					<tailtor :innerScore="hotitem.score" showNum="1"></tailtor>
				</view>
				
				
			</scroll-view>
		</view>
		<!-- 热门预告部分 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/interest.png"class="page-ico"></image>
				<text class="hot-title">热门预告</text>
			</view>
			<view class="page-block trailer">
				<video class="trailer-movie" :src="trailer.trailer" controls :poster="trailer.poster" v-for="trailer in trailerlList" :key="trailer.id"></video>
				
			</view>
		</view>
		<!-- 猜你喜欢部分 -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/guess-u-like.png" class="page-ico"></image>
				<text class="hot-title">猜你喜欢</text>
			</view>
			<view class="ulike">
				<view class="ulike-movies">
					<view class="movie-poster">
						<image src="../../static/poster/justice.png" class="movie-pic"></image>
					</view>
					<view class="movies-title">
						<view class="ulike-title">
							蝙蝠侠变得撒擦汗才能擦肩爱书吧						
						</view>
						<!-- 评分 -->
						<tailtor innerScore="9" showNum="0"></tailtor>
						<view class="ulike-desc">
							2018 / 美国 / 科幻 / 超级英雄"							
						</view>
						<view class="ulike-date">
							上映时间：2012-04-20(中国大陆) 
						</view>						
					</view>
					<view class="ulike-zan">
						<image src="../../static/icos/praise.png" class="zan-pic"></image>
						<view class="zan-title">
							赞一下
						</view>
					</view>
					
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Comment from '../../const/const.js';
	// 评分自定义组件
	import tailtor from '../../components/tailtor.vue';
	
	var ServerUrl = Comment.ServerUrl;
	var QQ = Comment.QQ;
	export default {
		data() {
			return {
				title: 'Hello wrold',
				carouselList: [],
				superherolList: [],
				trailerlList: []
			}
		},
		onLoad() {
			uni.request({
				url: ServerUrl + '/index/carousel/list?' + QQ,
				method: 'POST',
				success: (res) => {
					if(res.data.status == 200) {
						this.carouselList = res.data.data;
					}
				}
				})
				uni.request({
					url: ServerUrl + '/index/movie/hot?type=superhero&' + QQ,
					method: 'POST',
					success: (res) => {
						console.log(res);
						if(res.data.status == 200) {
							this.superherolList = res.data.data;
						}
					}
					})
			uni.request({
				url: ServerUrl + '/index/movie/hot?type=trailer&' + QQ,
				method: 'POST',
				success: (res) => {
					console.log(res);
					if(res.data.status == 200) {
						this.trailerlList = res.data.data;
					}
				}
				})
		},
		methods: {
			change(e) {
				let txt = e.detail.value;
				this.title = txt;
			}
		},
		components: {
			tailtor
		}
	}
</script>

<style>
	@import url("./index.css");	
</style>
